build: Enable React Compiler for Browserify builds, fix react-compiler/react-compiler ESLint rule violations
#37480
+2,353
−867
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
|
CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes. |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
All alerts resolved. Learn more about Socket for GitHub. This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored. Ignoring alerts on: |
Collaborator
✨ Files requiring CODEOWNER review ✨🔑 @MetaMask/accounts-engineers (2 files, +8 -8)
👨🔧 @MetaMask/core-extension-ux (1 files, +0 -1)
🫰 @MetaMask/core-platform (1 files, +3 -0)
🎨 @MetaMask/design-system-engineers (2 files, +4 -1)
🧩 @MetaMask/extension-devs (8 files, +621 -301)
💎 @MetaMask/metamask-assets (2 files, +2 -4)
📜 @MetaMask/policy-reviewers (8 files, +621 -301)
Tip Follow the policy review process outlined in the LavaMoat Policy Review Process doc before expecting an approval from Policy Reviewers. 🔗 @MetaMask/supply-chain (8 files, +621 -301)
|
MajorLift
changed the base branch from
main
to
jongsun/chore/251030-enable-rules-of-hooks
Collaborator
Builds ready [3eabf52]
UI Startup Metrics (1311 ± 102 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
| })`; | ||
|
|
||
| return ComponentWithRouterHooks; | ||
| return useComponentWithRouterHooks; |
There was a problem hiding this comment.
Bug: Misnamed Component Violates React Hook Naming Conventions
The useComponentWithRouterHooks function is named like a React hook but is actually a component. This violates React naming conventions and can confuse tools like React Compiler and linters.
Collaborator
Builds ready [d3453be]
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Contributor
Author
|
@metamaskbot update-policies |
Collaborator
|
Policies updated. 🧠 Learn how: https://lavamoat.github.io/guides/policy-diff/#what-to-look-for-when-reviewing-a-policy-diff |
Collaborator
Builds ready [fae3b64]
UI Startup Metrics (1227 ± 101 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Contributor
Author
|
@metamaskbot update-policies |
MajorLift
changed the title
Collaborator
|
Policies updated. 🧠 Learn how: https://lavamoat.github.io/guides/policy-diff/#what-to-look-for-when-reviewing-a-policy-diff |
Collaborator
Builds ready [9ed8bca]
UI Startup Metrics (1245 ± 92 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Collaborator
Builds ready [8521341]
UI Startup Metrics (1169 ± 98 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Collaborator
Builds ready [4c0ef78]
UI Startup Metrics (1256 ± 107 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
MajorLift
force-pushed
the
jongsun/build/251103-enable-react-compiler
branch
from
4c0ef78 to
1b20e16
Compare
MajorLift
changed the title
react-compiler/react-compiler ESLint rule violations
Collaborator
Builds ready [249d0ea]
UI Startup Metrics (1245 ± 97 ms)
📊 Page Load Benchmark ResultsCurrent Commit: 📄 Localhost MetaMask Test DappSamples: 100 Summary
📈 Detailed Results
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Motivation
This commit enables React Compiler for Browserify builds, and for ESLint (via the
react-compiler/react-compilerruleset). We can expect long-term UI performance benefits and developer time savings from this change. The Compiler transparently adds memoization code for React components and hooks, among other optimizations, and enforces React best practices in new code.Description
Because enabling React Compiler requires addressing all violations of the
react-compiler/react-compilerrule, this commit contains a large number of formatting changes and renames that do not require close review, alongside refactors and logical changes that do.I would suggest that reviewers primarily focus on whether a given change is problematic, rather than on whether it is necessary. If the motivation for any change is unclear, it's safe to assume that it fixes an error thrown in CI. The objective of this commit is to ship fixes that unblock React Compiler without introducing regressions in functionality or performance. Suggestions on implementing React best practices will be catalogued and addressed in follow-up PRs.
Changelog
CHANGELOG entry: null (non-user facing but regressions possible)
Related issues
react-hooks/rules-of-hooksESLint rule violations #37383Manual testing steps
Screenshots/Recordings
Before
After
Pre-merge author checklist
Pre-merge reviewer checklist
Note
Enables React Compiler across builds and linting, updates policies/deps, and refactors UI/hooks/tests to meet compiler rules.
babel-plugin-react-compiler) with targeteduisources and exclusions inbabel.config.js.react-compiler/react-compilerrule in ESLint forui/**/*.js,ts,tsx; addeslint-plugin-react-compiler.react-compiler-runtime,babel-plugin-react-compiler,eslint-plugin-react-compiler; update.depcheckrc.yml.useCallback/useMemo/useRef, correctuseEffectdeps/cleanups, replace inline debounced fns; add'use no memo'where needed.instanceof ArraywithArray.isArray, optional chaining, guard undefined IDs, avoid mutating refs unsafely.getIsEstimatedReturnLowto hookuseGetIsEstimatedReturnLowand update call sites.use*Selectortoget*variants (e.g.,getUseSafeChainsListValidation,getUse4ByteResolution).ownerId?: stringin confirm alerts; reducer ignoresundefinedownerId.isNativeAsset,isTokenAsset); adjustAssetPageto use updated asset data.renderHookand new selector/hook names; minor mocks adjusted.Written by Cursor Bugbot for commit 249d0ea. This will update automatically on new commits. Configure here.